<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="任务ID" prop="taskId">
        <el-input v-model="queryParams.taskId" placeholder="请输入任务ID" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="任务标题" prop="taskName">
        <el-input v-model="queryParams.taskName" placeholder="请输入任务标题" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>

      <el-form-item label="用户ID" prop="userId">
        <el-input v-model="queryParams.userId" placeholder="请输入用户ID" clearable size="small"
          @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="审核状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="请选择审核状态" clearable size="small" style="width: 200px"
          @keyup.enter.native="handleQuery">
          <el-option v-for="item in orderStatusOptions" :key="item.dictValue" :label="item.dictLabel"
            :value="item.dictValue" />
        </el-select>
      </el-form-item>
      <el-form-item label="任务时间">
        <el-date-picker v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置
        </el-button>
        <!-- <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd('add')">发布</el-button> -->
      </el-form-item>
    </el-form>
    <br />
    <!-- <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
       
      </el-col>
    </el-row> -->

    <el-table v-loading="loading" :data="rewardTaskUserList" @selection-change="handleSelectionChange">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <!-- <el-table-column label="用戶ID" align="center" prop="userId" /> -->
      <el-table-column label="任务ID" align="center" prop="taskId" />
      <el-table-column label="用戶账号" align="center" prop="account" />
      <el-table-column label="用戶ID" align="center" prop="userId" />
      <el-table-column label="任务名称" align="center" prop="taskName" />
      <el-table-column label="用户交单内容" align="center" prop="submitInfo" />
      <el-table-column label="提交截图" align="center" prop="taskName">
        <template slot-scope="scope">
          <el-image style="width: 100px; height: 140px; margin: 5px" :src="scope.row.submitImageList[0]"
            :preview-src-list="scope.row.submitImageList">
          </el-image>

        </template>
      </el-table-column>
      <el-table-column label="接单时间" align="center" prop="createTime" />
      <el-table-column label="提交时间" align="center" prop="submitTime" />
      <el-table-column label="审核时间" align="center" prop="auditTime" />
      <el-table-column label="任务状态" align="center" prop="auditStatus" :formatter="appTypeFormat"></el-table-column>
      <el-table-column label="任务金额(π)" align="center" prop="rewardAmt" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-view" @click="handleView(scope.row)">详情
          </el-button>

          <el-button v-if="scope.row.status === 1" size="mini" type="text" icon="el-icon-check"
            @click="audit(scope.row, 2, scope.$index)">通过
          </el-button>
          <el-button v-if="scope.row.status === 1" size="mini" type="text" icon="el-icon-close"
            @click="audit(scope.row, -1, scope.$index)">拒绝
          </el-button>

          <el-button v-if="scope.row.status === 1" size="mini" type="text" icon="el-icon-plus"
            @click="audit(scope.row, 3, scope.$index)">补交
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @close="cancel">
      <el-form ref="form" :model="form" label-width="120px">
        <el-row :span="24">
          <el-col :span="12">
            <el-form-item label="任务名称：">
              <span>{{ form.taskName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="任务ID：">
              <span>{{ form.taskId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户ID：">
              <span>{{ form.userId }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户账号：">
              <span>{{ form.account }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="任务图标：">
              <el-image style="width: 100px; height: 100px; margin: 5px" :src="requestUrl + form.taskIcon"
                :preview-src-list="[requestUrl + form.taskIcon]">
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交单格式：">
              <span>{{ form.taskFormat }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户交单信息：">
              <span>{{ form.submitInfo }}</span>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-form-item label="示例图列表：">
              <!--  -->
              <el-image v-for="(item, index) in form.taskImageList" :key="index"
                style="width: 100px; height: 140px; margin: 5px" :src="requestUrl + item"
                :preview-src-list="[requestUrl + '' + item]">
              </el-image>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="用户上传截图列表：" label-width="160px">
              <!--  -->
              <el-image v-for="(item, index) in form.submitImageList" :key="index"
                style="width: 100px; height: 140px; margin: 5px" :src="item" :preview-src-list="[item]">
              </el-image>
            </el-form-item>
          </el-col>


        </el-row>






        <el-form-item label="任务审核">
          <span>{{
            form.status == 0
            ? "已报名"
            : form.status == 1
              ? "待审核"
              : form.status == -1
                ? "拒绝审核"
                : form.status == 2 ? "已完成" : "补交"
          }}</span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">确认</el-button>
          <!-- <el-button @click="cancel">取消</el-button> -->
        </el-form-item>
      </el-form>
    </el-dialog>


    <!-- 审核 -->

    <el-dialog :title="auditStatusto == 2 ? '' : auditStatusto == -1 ? '审核不通过' : '补交'" :visible.sync="auditopen"
      width="500px" append-to-body @close="auditcancel">

      <div style="width: 100%;text-align:center;">


        <el-form ref="Formaudit" :model="formaudit" label-width="120px">






          <el-form-item label="" v-if="auditStatusto == 2" label-width="0px">
            <p>{{
              audittitle
            }}</p>
          </el-form-item>


          <el-form-item label="拒绝原因:" v-if="auditStatusto == -1" prop="rejectReason" :rules="[
            { required: true, message: '请输入拒绝原因', trigger: 'blur' },
          ]">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 8 }" placeholder="请输入拒绝原因"
              v-model="formaudit.rejectReason">
            </el-input>
          </el-form-item>
          <el-form-item v-if="auditStatusto == 3" label="补交原因:" prop="resubmitReason" :rules="[
            { required: true, message: '请输入补交原因', trigger: 'blur' },
          ]">
            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 8 }" placeholder="请输入补交原因"
              v-model="formaudit.resubmitReason">
            </el-input>
          </el-form-item>

        </el-form>
        <div style="width: 100%; display: flex;justify-content: center;">
          <el-button type="primary" @click="auditsubmit">确认</el-button>
          <el-button @click="auditcancel">取消</el-button>
        </div>
      </div>
    </el-dialog>

  </div>
</template>
<script>


import { earnTaskuserlist, earnTaskuseraudit } from "@/api/admin/moneyManage";
// import TcVod from "vod-js-sdk-v6";
import { getToken } from "@/utils/auth";
export default {
  name: "rewardTaskUser",
  // components: { CTTupload },
  data () {
    return {
      // 显示搜索条件
      showSearch: true,
      requestUrl: this.$img.requestUrl,

      queryParams: {
        taskId: "",
        pageNum: 1,
        pageSize: 10,
        auditStatus: "",
        taskName: "",
        userId: "",
        status: "",
      },
      audittitle: "",
      auditStatusto: 0,
      auditselectindex: 0,
      formaudit: {
        id: '',
        resubmitReason: '',
        rejectReason: "",
      },
      auditopen: false,
      orderStatusOptions: [
        {
          dictValue: 0,
          dictLabel: "已报名",
        },
        {
          dictValue: 1,
          dictLabel: "待审核",
        },
        {
          dictValue: 2,
          dictLabel: "已完成",
        },
        {
          dictValue: 3,
          dictLabel: "补交",
        },
        {
          dictValue: -1,
          dictLabel: "拒绝审核",
        },
      ],

      // 总条数
      total: 0,
      dateRange: [],
      loading: false,
      rewardTaskUserList: [],
      form: {},
      formadd: {
        hotFlag: 0,
      },
      businessinfouserlist: {},
      open: false,
      addopen: false,
      title: "",
      istype: false,
      resource: "1",
      addtype: 0,
      // 上传参数
      upload: {
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/admin/upload/uploadImg/3",
      },
      fileList: [],
      dialogImageUrl: "",
      dialogVisible: false,

    };
  },
  created () {
    this.getList();
  },

  methods: {

    // 新增商品分类

    // 表单重置
    reset () {
      this.formadd = {};
      this.resetForm("formadd");
    },
    // 表单重置
    reset2 () {
      // this.form = {};
      if (this.istype) {
        try {
          this.$refs.cttUpload.handleRemove();
        } catch (err) {
          console.log(err, "err");
        }
      }

      this.resetForm("formRef");
    },

    // 图片删除
    handleRemove (file, fileList) {
      const that = this;
      this.formadd.detailImgList = [];

      fileList.forEach((element) => {
        this.formadd.detailImgList.push(element.response.data.list[0].filePath);
      });
    },
    // 文件上传成功处理
    handleSuccess (response, file, fileList) {
      this.upload.isUploading = false;

      this.formadd.detailImgList.push(response.data.list[0].filePath);
      this.msgSuccess(response.msg);
    },

    getList () {
      this.loading = true;
      earnTaskuserlist(
        this.addDateRange(this.queryParams, this.dateRange)
      ).then((response) => {
        response.rows.forEach((item, index) => {
          item.submitImageList.forEach((item2, index) => {
            item.submitImageList[index] = this.requestUrl + item2;
          });
        });
        this.rewardTaskUserList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },

    // 类型字典翻译
    appTypeFormat (row, column) {
      return this.selectDictLabel(this.orderStatusOptions, row.status);
    },

    audit (row, index, selectindex) {
      let self = this;
      this.auditopen = true;
      this.auditStatusto = index
      this.formaudit.id = row.id;
      this.formaudit.resubmitReason = ""
      this.formaudit.rejectReason = ""
      this.auditselectindex = selectindex
      // console.log(selectindex)
      if (index == 2) {
        this.audittitle = "是否通过用户ID:" + row.userId + "提交“" + row.taskName + "”任务"

      }
      if (index == 3) {
        delete this.formaudit.rejectReason;

      }
      if (index == -1) {
        delete this.formaudit.resubmitReason;

      }

    },
    //审核
    auditsubmit () {

      if (this.auditStatusto == 2) {
        this.$set(this.rewardTaskUserList[this.auditselectindex], "status", this.auditStatusto)

      } else if (this.auditStatusto == 3) {
        this.$set(this.rewardTaskUserList[this.auditselectindex], "status", this.auditStatusto)
      } else if (this.auditStatusto == -1) {
        this.$set(this.rewardTaskUserList[this.auditselectindex], "status", this.auditStatusto)
      }
      this.formaudit.status = this.auditStatusto
      this.$refs["Formaudit"].validate((valid) => {
        if (valid) {
          earnTaskuseraudit(this.formaudit).then((response) => {
            if (response.code == 200) {

              this.auditcancel()
              this.msgSuccess("操作成功");

            }
          });
        }


      })



    },


    submit () {
      // this.form.status = this.resource;
      this.open = false;
    },

    // 取消按钮
    cancel () {
      this.open = false; //地址弹窗
      // this.addopen = false;
      this.getList();
    },
    auditcancel () {
      this.auditopen = false;
    },
    cancel2 () {
      this.addopen = false;
      this.reset2();
      this.getList();
    },

    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1;
      this.getList();
      // this.getTotal();
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.resetForm("queryForm");
      this.queryParams.beginTime = "";
      this.queryParams.endTime = "";
      this.dateRange = [];
      this.handleQuery();
    },
    handleView (row) {
      this.form = row;
      this.title = "用户悬赏任务详情";
      this.open = true;
    },


  },
};
</script>
<style scoped lang="scss"></style>
